<template>
  <!-- 3.第三个问答区 富文本编辑器-->
  <div class="card-right">
    <span class="shu">|</span>
    <span>{{ Info.topic.title }}</span>
    <a-card class="flex-1 rounded"
      :body-style="{ padding: '12px 16px', height: '100%', display: 'flex', 'flex-direction': 'column', fontSize: '15.5px' }"
      :bordered="false">
      <span style="position: relative;width: 1000px;">
        <a-textarea :auto-size="{ minRows: 3, maxRows: 10 }"
        :rows="3" style="width: 900px;" v-model="value" @change="editorChange" @input="updateWordCount" 
        :maxlength=" 3000 " /> 
        <i style="position: absolute; bottom: 7%; right: 12%;font-size: 12px; color: #cbcbcb; z-index: 10" > {{ wordCount }} / 3000 </i>
      </span>
      
      <!-- <editor class="flex-1" :value="value" @change="editorChange" :key="selectedKeys[0]" /> -->
    </a-card>
  </div>
</template>
<script>
import { Editor } from '@/components'

export default {
  props: {
    Info: {
      type: Object
    },
    Answer: {
      type: Object
    },
    DpiaModelId: {
      type: Number,
    },
  },
  components: {
    Editor,
  },
  data() {
    return {
      value: '',
      selectedKeys: [],
      wordCount: 0,
      // totalCount:"",
    }
  },
  watch: {
    Info(e) {
      console.log('e',e);
      if (Object.keys(e).indexOf("lastAnswer") != -1) {
        if (e.lastAnswer.type == 3) {
          this.value = e.lastAnswer.answer
        } else {
          this.value = null
        }
      }
    },
  },
  created() {
    this.init();
  },
  mounted() {
    this.wordCount = this.value.length;
    // if (this.DpiaModelId == 96) {
    //   this.totalCount = "2500";
    // }else if (this.DpiaModelId == 106) {
    //   this.totalCount = "5000";
    // }
  },
  methods: {
    init() {
      console.log(this.Info);
      if (this.Info != {}) {
        if (this.Info.lastAnswer.type == 3) {
          this.value = this.Info.lastAnswer.answer
        }
      }
    },
    // 富文本编辑器
    editorChange() {
      // this.value = e
      var topicId = "";
      // 获取答案对应的题目ID
      // for (var i = 0; i < this.Info.answer.length; i++) {
      //   topicId = this.Info.answer[i].TopicTid
      // }
        
      // 章节、题目、答案
      setTimeout(() => {
        this.$emit('result', {
          title: this.Info.topic.title,
          answerName: this.value,
          chapter: this.Info.topic.chapter,
          topic: this.Info.topic.id,
          AnswerQid: this.value,
          type: 3
        })
      })
    },
    updateWordCount() {
      this.wordCount = this.value.length;
    },
  }
}
</script>
<style lang="less" scoped>
.card-right {
  margin: 30px 30px 30px 60px;
}

.shu {
  /*矩形备份*/
  margin-right: 5px;
  left: 838px;
  top: 287px;
  width: 6px;
  height: 12px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);

}
</style>